<template>
    <div id="grouping">
        <div class="grouping-left">
            <div class="header">交易对手信息</div>
            <div class="list-left-div">
                <el-input placeholder="分类序号" v-model="filterText" style="width:250px" size="mini" @input="onchaninput"></el-input>
                <el-button class="left-p" type="primary" icon="el-icon-search" @click="onchaninput(filterText)"> </el-button>
            </div>
            <div class="tree">
                <el-tree
                    class="filter-tree"
                    :data="datalist"
                    :props="defaultProps"
                    default-expand-all
                    :filter-node-method="filterNode"
                    ref="tree"
                    :expand-on-click-node="false"
                    @node-click="handleNodeClick"
                >
                </el-tree>
            </div>
        </div>
        <div class="grouping-right">
            <div class="header">交易对手信息</div>
            <GroupingInformationContent :cutInfo="cutInfo"></GroupingInformationContent>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import GroupingInformationContent from './grouping-information-content.vue';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'GroupingInformation',
    components: {
        GroupingInformationContent,
    },
})
export default class GroupingInformation extends Vue {
    filterText = '';
    cutInfo = {
        id: 1,
        label: '外部',
    };
    datalist = [
        {
            id: 1,
            label: '外部',
            children: [],
        },
    ];
    defaultProps = {
        children: 'children',
        label: 'label',
    };
    // 分页
    private pages: pages = {
        pageSize: 50,
        currentPage: 1,
        total: 0,
    };
    // 默认展示明细字段
    private searchParam = {
        coppoGrCode: '',
        paging: {
            currentPage: 0,
            pageSize: 0,
        },
        sort: '',
    }; // 查询条件
    mounted() {
        this.getListAll();
    }
    // 查询全部交易对手组信息
    getListAll(): void {
        this.$axios
            .post('/tnOppoGroup/listAll')
            .then((res: any) => {
                for (let i = 0; i < res.length; i++) {
                    this.datalist[0].children.push({ id: res[i].nGroupId, label: res[i].nGroupId + '-' + res[i].cGroupName });
                }
            })
            .catch(() => {});
    }
    private onchaninput(e: any) {
        // console.log(e);
        let filtration = this.$refs.tree as { filter?: any };
        filtration.filter(e);
    }
    // 过滤
    private filterNode(value: string, data: { label: string }, node: any) {
        if (!value || (node.level == 1 && data.hasOwnProperty('children'))) return true;
        return data.label.indexOf(value) !== -1;
    }
    public handleNodeClick(data: any): any {
        if (data.id == this.cutInfo.id) return;
        this.cutInfo = data;
    }
}
</script>
<style lang="scss" scoped>
.header {
    width: 100%;
    height: 35px;
    line-height: 35px;
    background: #e5e8eb;
    color: black;
    padding-left: 20px;
    border-bottom: 1px solid #cecbcb;
    margin-top: 2px;
}
#grouping {
    display: flex;
    height: calc(100vh - 50px);
    border: 1px solid #cecbcb;
}
.grouping-left {
    width: 300px;
    // height: 100vh;
    border-right: 1px solid #cecbcb;
    .list-left-div {
        width: 100%;
        height: 40px;
        line-height: 30px;
        background: #fff;
        border: 1px solid #cacaca;
        padding-top: 4px;
        padding-left: 10px;
        position: relative;
        display: flex;

        .left-p {
            // position: absolute;
            // // right: 5px;
            // top: 4px;
            margin-top: 3px;

            .el-icon-search {
                color: #fff;
            }
        }

        & /deep/ .el-button {
            height: 27px;
            padding: 6px;
        }
    }
    .tree {
        width: 100%;
        height: calc(100vh - 130px);
        overflow: auto;
        /deep/ .el-tree-node.is-current > .el-tree-node__content {
            background: #b9e5fe;
        }
    }
}
.grouping-right {
    // width: 100%;
    // height: 100vh;
    // border: 1px solid blue;
    width: calc(100% - 300px);
}
</style>
